<template>
  <AnimateOnScroll animation="fade-up" :threshold="0.2">
    <div class="counter">
      <h2>计数器示例</h2>
      <p>当前计数: 
        <AnimatedNumber 
          :value="counter.count" 
          :duration="800" 
          animation="easeOut"
          class="count-number"
        />
      </p>
      <p>双倍计数: 
        <AnimatedNumber 
          :value="counter.doubleCount" 
          :duration="800" 
          animation="easeOut"
          class="count-number double"
        />
      </p>
      <div class="buttons">
        <button @click="counter.increment" class="btn">增加</button>
        <button @click="counter.decrement" class="btn">减少</button>
      </div>
    </div>
  </AnimateOnScroll>
</template>

<script setup lang="ts">
import { useCounterStore } from '../store/counter'
import AnimateOnScroll from './AnimateOnScroll.vue'
import AnimatedNumber from './AnimatedNumber.vue'

// 获取store实例
const counter = useCounterStore()
</script>

<style scoped>
.counter {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  max-width: 400px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: white;
}

.counter:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.btn {
  padding: 8px 16px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: #3367d6;
}

.btn:active {
  transform: scale(0.95);
}

.count-number {
  display: inline-block;
  min-width: 30px;
  font-weight: bold;
  font-size: 18px;
}

.counter:hover .count-number {
  color: #4285f4;
}

.count-number.double {
  color: #0f9d58;
}
</style> 